<template>
	<ul class="goods" @click="goDetail">
		<li class="good">
			<div class="goodiv">
				<img
					class="goodivimg1"
					src="https://yanxuan-item.nosdn.127.net/ee0965b486874661667a9168ae0738fe.png?type=webp&imageView&quality=95&thumbnail=245x245"
					alt=""
					data-id="4013106"
				/>
				<img
					class="goodivimg"
					src="https://yanxuan-item.nosdn.127.net/b7d5a39aca6b0bf27991d2f6ef30f071.jpg?type=webp&quality=95&thumbnail=245x245&imageView"
					alt=""
					data-id="4013106"
				/>
				<div class="goodivfooter">
					<div class="goodivFooterTitle" data-id="4013106">
						高钙高蛋白，脆脆虾 20克
					</div>
					<div class="goodivFooterPrice">¥18</div>
					<div class="goodivfooterbtn" @click="addId(-1, 4013106)">
						加入购物车
					</div>
				</div>
				<div class="joinCart" v-if="isShow === -1">
					<div class="joinCartHeater">
						<div class="joinCartjoin">加入购物车</div>
						<div class="joinCartX" @click="deleteAll">x</div>
					</div>
					<div class="joinCartBody">
						<div class="joinCarttype">类型</div>
						<div
							:class="{ joinCarttype1: true, actionv2: typeNum === 1 }"
							@click="modifytypeNum(1)"
						>
							类型一
						</div>
						<div
							:class="{ joinCarttype1: true, actionv2: typeNum === 2 }"
							@click="modifytypeNum(2)"
						>
							类型二
						</div>
					</div>
					<div class="quantity">
						<InputNumber
							v-model="goodsQuantity"
							:value="goodsQuantity"
							@input="modifygoodsQuantity($event)"
						/>
						<button
							:class="{ quantitybtn: true, actionv1: typeNum }"
							@click="addCart"
						>
							确定
						</button>
					</div>
				</div>
			</div>
		</li>
		<li class="good" v-for="(item, index) in goodList" :key="item.id">
			<div class="goodiv">
				<img
					class="goodivimg1"
					:src="item.listPicUrl"
					alt=""
					:data-id="item.id"
				/>
				<img
					class="goodivimg"
					:src="item.scenePicUrl"
					alt=""
					:data-id="item.id"
				/>
				<div class="goodivfooter">
					<div class="goodivFooterTitle" :data-id="item.id">
						{{ item.name }}
					</div>
					<div class="goodivFooterPrice">¥{{ item.retailPrice }}</div>
					<div class="goodivfooterbtn" @click="addId(index, item.id)">
						加入购物车
					</div>
				</div>
				<div class="joinCart" v-if="isShow === index">
					<div class="joinCartHeater">
						<div class="joinCartjoin">加入购物车</div>
						<div class="joinCartX" @click="deleteAll">x</div>
					</div>
					<div class="joinCartBody">
						<div class="joinCarttype">类型</div>
						<div
							:class="{ joinCarttype1: true, actionv2: typeNum === 1 }"
							@click="modifytypeNum(1)"
						>
							类型一
						</div>
						<div
							:class="{ joinCarttype1: true, actionv2: typeNum === 2 }"
							@click="modifytypeNum(2)"
						>
							类型二
						</div>
					</div>
					<div class="quantity">
						<InputNumber
							v-model="goodsQuantity"
							:value="goodsQuantity"
							@input="modifygoodsQuantity($event)"
						/>
						<button
							:class="{ quantitybtn: true, actionv1: typeNum }"
							@click="addCart"
						>
							确定
						</button>
					</div>
				</div>
			</div>
		</li>
	</ul>
</template>

<script>
import InputNumber from "@/components/InputNumber"
export default {
	props: {
		goodList: {
			type: Array,
		},
	},
	data() {
		return {
			// 选择的商品数量
			goodsQuantity: 1,
			// 选择的类型
			typeNum: 0,
			// 控制加入购物车显示隐藏
			isShow: "",
			// 商品Id
			goodsId: 0,
		}
	},
	components: { InputNumber },
	methods: {
		addCart() {
			const { goodsId, typeNum, goodsQuantity } = this
			if (!typeNum) {
				return
			}
			console.log(goodsId, typeNum, goodsQuantity)
		},
		addId(index, id) {
			this.goodsId = id
			this.isShow = index
		},
		deleteAll() {
			this.typeNum = 0
			this.goodsQuantity = 1
			this.isShow = false
		},
		modifytypeNum(num) {
			this.typeNum = num
		},
		modifygoodsQuantity(value) {
			console.log(value)
			this.goodsQuantity = value
		},
		goDetail(event) {
			// console.log(event)
			const { id } = event.target.dataset
			if (id) {
				this.$router.push({
					name: "Detail",
					query: {
						id,
					},
				})
			}
		},
	},
}
</script>

<style lang="less" scoped>
.joinCart {
	position: absolute;
	top: 20px;
	left: -85px;
	border: 1px solid #999;
	width: 418px;
	padding: 20px;
	z-index: 99;
	background: #fff;
	.joinCartHeater {
		display: flex;
		justify-content: space-between;
		padding-bottom: 18px;
		font-size: 14px;
		color: #999;
		border-bottom: 1px solid #e1e1e1;
	}
	.joinCartX {
		cursor: pointer;
	}
	.joinCartBody {
		text-align: left;
		.joinCarttype {
			font-size: 12px;
			height: 32px;
			line-height: 32px;
		}
		.joinCarttype1,
		.joinCarttype2 {
			display: inline-block;
			padding: 20px;
			cursor: pointer;
			border: 1px solid #ccc;
		}
		.actionv2 {
			border: 5px solid #b4a078;
		}
	}
	.quantitybtn {
		font-size: 14px;
		width: 108px;
		height: 28px;
		background: #ccc;
		border: 1px solid #ccc;
	}
	.actionv1 {
		background: #b4a078;
	}
}
h1 {
	font-size: 24px;
	text-align: center;
	padding-top: 40px;
	font-weight: 700;
	margin-bottom: 10px;
}
.goods {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	.good {
		margin-bottom: 40px;
		float: left;
		.goodiv {
			text-align: center;
			position: relative;
			width: 245px;
			height: 401px;
			.shelf {
				position: relative;
				top: -35px;
				background: #e8bf5b;
				color: #fff;
				font-size: 14px;
				height: 34px;
				line-height: 34px;
				width: 245px;
				.shelfleft {
					padding: 0 35px;
					display: inline-block;
				}
				.shelfRemind {
					background: #fff;
					display: inline-block;
					width: 110px;
					height: 26px;
					color: #000;
					border: none;
					border-radius: 2px;
				}
			}
			.goodivimg1,
			.goodivimg {
				width: 245px;
				height: 245px;
			}
			.goodivimg {
				position: absolute;
				left: 0;
				opacity: 0;
			}
			.goodivFooterTitle {
				margin-top: 30px;
				cursor: pointer;
				font-size: 14px;
				font-weight: bold;
			}
			.goodivFooterTitle:hover {
				color: #b4a078;
			}
			.goodivFooterPrice {
				width: 180px;
				color: red;
				margin: 10px auto 0;
				padding-bottom: 10px;
				border-bottom: 1px solid #e8e8e8;
			}
			.goodivfooterbtn {
				border: 1px solid #b4a078;
				background: #b4a078;
				color: #fff;
				font-size: 14px;
				width: 110px;
				height: 30px;
				line-height: 30px;
				margin: 0 auto;
				cursor: pointer;
			}
			.goodivFooterIintroduce {
				color: #999;
				padding: 10px 0 40px;
			}
		}
	}
	.good:hover .goodivimg {
		opacity: 1;
	}
	.good:hover {
		background: #f4f0ea;
	}
}
</style>
